<section class="banner-alerts {{if this.isShowingBanners 'banner-alerts--show' 'banner-alerts--hide'}}">
  {{#each banners.banners as |banner|}}
    {{!-- Exiting state will shrink the banner alert to height 0 before it gets ultimately removed. Active is the
          basic default state of the banner alert. --}}
    <div
      class="banner-alert {{if banner.isExiting "banner-alert--exiting" "banner-alert--active"}} banner-alert--{{banner.type}}"
    >
      <FaIcon @icon={{banner.iconName}} class="banner-alert__icon" />
      <div class="banner-alert__content">
        {{#if banner.usePartial}}
          {{! TODO: META-7160 remove partial usage }}
          {{! template-lint-disable no-partial }}
          {{partial banner.content}}
        {{else}}
          {{banner.content}}
          {{#if banner.link}}
            <p>
              For more information, please visit the following link:
              <a href={{banner.link}} target="_blank" rel="noreferrer noopener" class="banner-alert__link">{{banner.link}}</a>
            </p>
          {{/if}}
        {{/if}}
      </div>
      {{#if banner.isDismissable}}
        <button {{action "onDismissBanner" banner}} class="banner-alert__dismiss" type="button">
          <FaIcon @icon="times"  />
        </button>
      {{/if}}
    </div>
  {{/each}}
</section>
